<template>
  <div id="freightCenterDataTable">
    <div class="allElectronicBill" v-if="showModel.stationFreesDataTableShow">
      <div class="showHideBtn" @click="showHideTable('hide')">
        <i class="hideIcon"></i>
      </div>
      <div class="allElectronicBillBackground">
        <div class="quadrilateral borderLeft">
          <div style="width: 100%" class="borderTop"></div>
        </div>
        <div class="diamond"></div>
        <div class="frameBorder"></div>
        <div style="position:absolute;right:0;top:0;height: 100%;z-index: 400;" class="borderRight"></div>
        <div style="position:absolute;right:0;bottom:0;width: 200px;z-index: 400;" class="borderBottom"></div>
      </div>
      <div class="allElectronicBillDetail">
        <Row style="padding: 5px 0 10px 0;border-bottom: 1px solid #225D92;">
          <i-col span="12" class="titleStyle" style="margin-top: 4px;">
            <span style="margin-left: 4px;">{{stationCenterName}}</span>
          </i-col>
          <i-col span="12" style="text-align: right;">
            <ButtonGroup>
              <Button type="primary" style="cursor:pointer;" size="small" :class="feightCountListSelect==='day'?'buttonGroupActive':''" @click.native="changeStartTime('day')">日</Button>
              <Button type="primary" style="cursor:pointer;" size="small" :class="feightCountListSelect==='month'?'buttonGroupActive':''" @click.native="changeStartTime('month')">月</Button>
              <Button type="primary" style="cursor:pointer;" size="small" :class="feightCountListSelect==='year'?'buttonGroupActive':''" @click.native="changeStartTime('year')">年</Button>
            </ButtonGroup>
          </i-col>
        </Row>
        <Row class="infoDetailRow" style="margin-top:8px;">
          <i-col span="12">公铁联运总量</i-col>
          <i-col span="12">{{((+currentStationCenter.zyzl)/10000)>=100?(+currentStationCenter.zyzlt/10000).toFixed(floatNum)+'万':+currentStationCenter.zyzl}}单</i-col>
        </Row>
        <Row class="infoDetailRowBackfround">
          <i-col span="24">整车</i-col>
        </Row>
        <Row class="infoDetailRow">
          <i-col span="12">发送量</i-col>
          <i-col span="12">{{((+currentStationCenter.zcSendNum)/10000)>0?((+currentStationCenter.zcSendNum)/10000).toFixed(floatNum):0}}万吨</i-col>
        </Row>
        <Row class="infoDetailRow">
          <i-col span="12">发送量</i-col>
          <i-col span="12">{{((+currentStationCenter.zcArriveNum)/10000)>0?((+currentStationCenter.zcArriveNum)/10000).toFixed(floatNum):0}}万吨</i-col>
        </Row>
        <Row class="infoDetailRowBackfround">
          <i-col span="24">集装箱</i-col>
        </Row>
        <Row class="infoDetailRow">
          <i-col span="12">发送箱数</i-col>
          <i-col span="12">{{((+currentStationCenter.xcSendCount)/10000)>=100?(+currentStationCenter.xcSendCount/10000).toFixed(floatNum)+'万':+currentStationCenter.xcSendCount}}单</i-col>
        </Row>
        <Row class="infoDetailRow">
          <i-col span="12">发送量</i-col>
          <i-col span="12">{{((+currentStationCenter.zcSendNum)/10000)>0?((+currentStationCenter.zcSendNum)/10000).toFixed(floatNum):0}}万吨</i-col>
        </Row>
        <Row class="infoDetailRow">
          <i-col span="12">到达箱数</i-col>
          <i-col span="12">{{((+currentStationCenter.xcArriveCount)/10000)>=100?(+currentStationCenter.xcArriveCount/10000).toFixed(floatNum)+'万':+currentStationCenter.xcArriveCount}}单</i-col>
        </Row>
        <Row class="infoDetailRow">
          <i-col span="12">到达量</i-col>
          <i-col span="12">{{((+currentStationCenter.xcArriveNum)/10000)>0?((+currentStationCenter.xcArriveNum)/10000).toFixed(floatNum):0}}万吨</i-col>
        </Row>
      </div>
    </div>
    <div class="showTableBtn" v-if="showModel.stationFreesDataTableShowBtn" @click="showHideTable('show')">
      <div class="showTableBtnIcon">
        <i class="showIcon"></i>
      </div>
      <div class="showTableBtnTitle">展开数据</div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'freightCenterDataTable',
    data () {
      let floatNum = 2
      let showModel = {
        stationFreesDataTableShow: true,
        stationFreesDataTableShowBtn: false
      }
      let feightCountListSelect = 'day'
      let endTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 23:59:59'
      let dayStartTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 00:00:00'
      let monthStartTime = moment().subtract(1, 'days').month(moment().month() - 1).format('YYYY-MM-DD') + ' 00:00:00'
      let yearStartTime = moment().subtract(1, 'days').year() - 1 + '-' + moment().month(moment().month()).format('MM-DD') + ' 00:00:00'
      let tableParam = {
        startTime: dayStartTime,
        endTime: endTime
      }
      let stationCenterDay = {}
      let stationCenterMonth = {}
      let stationCenterYear = {}
      let currentStationCenter = {}
      let datas = {floatNum, currentStationCenter, stationCenterDay, stationCenterMonth, stationCenterYear, showModel, feightCountListSelect, endTime, dayStartTime, monthStartTime, yearStartTime, tableParam}
      return datas
    },
    props: {
      stationCenterName: {
        type: String,
        default: ''
      }
    },
    computed: {},
    methods: {
      showHideTable (type) {
        if (type === 'hide') {
          this.showModel = {
            stationFreesDataTableShow: false,
            stationFreesDataTableShowBtn: true
          }
        } else if (type === 'show') {
          this.showModel = {
            stationFreesDataTableShow: true,
            stationFreesDataTableShowBtn: false
          }
        }
      },
      changeStartTime (startTime) {
        this.feightCountListSelect = startTime
        if (startTime === 'day') {
          this.currentStationCenter = this.stationCenterDay
        } else if (startTime === 'month') {
          this.currentStationCenter = this.stationCenterMonth
        } else if (startTime === 'year') {
          this.currentStationCenter = this.stationCenterYear
        }
      },
      getTableData () {
        let objDay = JSON.parse(localStorage.getItem('stationFreesDataTableDataListDay'))
        let objMonth = JSON.parse(localStorage.getItem('stationFreesDataTableDataListMonth'))
        let objYear = JSON.parse(localStorage.getItem('stationFreesDataTableDataListYear'))
        this.stationCenterDay = objDay.dataListDay[this.stationCenterName]
        this.stationCenterMonth = objMonth.dataListMonth[this.stationCenterName]
        this.stationCenterYear = objYear.dataListYear[this.stationCenterName]
      }
    },
    mounted () {
      this.getTableData()
      this.changeStartTime('day')
      this.feightCountListSelect = 'day'
    },
    watch: {
      'stationCenterName': {
        handler: function (oldVal, newVal) {
          this.getTableData()
          this.changeStartTime('day')
          this.feightCountListSelect = 'day'
        },
        deep: true
      }
    },
    components: {}
  }
</script>

<style>
  #freightCenterDataTable .allElectronicBill {
    position: absolute;
    top: 150px;
    right: 30px;
    z-index: 200;
    width: 240px;
    height: 260px;
  }

  #freightCenterDataTable .allElectronicBill .allElectronicBillBackground {
    width: 220px;
    height: 260px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 300;
  }

  #freightCenterDataTable .allElectronicBill .allElectronicBillBackground .quadrilateral {
    width: 220px;
    height: 240px;
    background: #205078;
  }

  #freightCenterDataTable .allElectronicBill .allElectronicBillBackground .diamond {
    border-top: 20px solid #205078;
    border-left: 20px solid transparent;
    height: 0;
    width: 220px;
  }

  #freightCenterDataTable .allElectronicBill .allElectronicBillBackground .frameBorder {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 350;
    width: 30px;
    height: 30px;
    background: url("../../../../../static/img/img_zdangle.png") no-repeat;
    background-size: cover;
  }

  /*边框*/
  #freightCenterDataTable .borderTop {
    border-top-width: 1px;
    border-top-style: solid;
    border-image: -webkit-linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: -moz-linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
  }

  #freightCenterDataTable .borderLeft {
    border-left-width: 1px;
    border-left-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
  }

  #freightCenterDataTable .borderRight {
    border-right-width: 1px;
    border-right-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
  }

  #freightCenterDataTable .allElectronicBill .allElectronicBillDetail {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 450;
    margin: 10px;
    width: 200px;
    height: 240px;
  }

  #freightCenterDataTable .allElectronicBill .titleStyle {
    text-align: left;
    font-size: 11px;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(226, 251, 255, 1)), to(rgba(107, 194, 255, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #freightCenterDataTable .borderBottom {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-image: -webkit-linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: -moz-linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
  }

  #freightCenterDataTable .ivu-btn-primary {
    color: #66B7F2;
    background-color: #225D92;
    border: 2px solid #225D92;
  }

  #freightCenterDataTable .buttonGroupActive {
    background-color: #173A58;
    border: 2px solid #225D92;
  }

  #freightCenterDataTable .showHideBtn {
    width: 15px;
    height: 60px;
    position: absolute;
    top: 50%;
    right: 5px;
    background: #347DBC;
    margin-top: -30px;
    line-height: 60px;
    color: #66B7F2;
    cursor: pointer;
  }

  #freightCenterDataTable .hideIcon {
    display: block;
    margin: 24px auto;
    width: 6px;
    height: 12px;
    background: url("../../../../../static/img/lt.png") no-repeat;
    background-size: cover;
  }

  #freightCenterDataTable .showTableBtn {
    position: absolute;
    top: 240px;
    right: 0;
    width: 30px;
    height: 80px;
    background: #347DBC;
    padding: 5px;
  }

  #freightCenterDataTable .showTableBtnIcon {
    float: left;
    width: 10px;
    height: 70px;
  }

  #freightCenterDataTable .showTableBtnIcon .showIcon {
    display: block;
    margin: 29px 0;
    width: 6px;
    height: 12px;
    background: url("../../../../../static/img/rt.png") no-repeat;
    background-size: cover;
  }

  #freightCenterDataTable .showTableBtnTitle {
    margin-top: 2px;
    float: left;
    width: 10px;
    height: 60px;
    font-size: 12px;
    color: #97D3FF;
  }

  #freightCenterDataTable .allElectronicBill .infoDetailRow {
    padding: 2px 5px;
    font-size: 12px;
    color: #FFFFFF;
    background-image: linear-gradient(90deg, rgba(27, 47, 67, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);
  }

  #freightCenterDataTable .allElectronicBill .infoDetailRowBackfround {
    padding: 2px 5px;
    font-size: 11px;
    color: #5FBBFB;
  }

</style>
